<div class="content">
    <div class="left">
        <nz-card [nzSize]="'small'">
            <button nz-button class="mb-10" (click)="refresh()"><i nz-icon nzType="sync"></i>刷新数据</button>
            <app-department-tree #tree (selectedNodeChanged)="selectedChanged($event)"></app-department-tree>
        </nz-card>
    </div>
    <div class="right">
        <nz-card [nzSize]="'small'">
            <div>
                <button nz-button class="mr-10" (click)="add()" *canOperate="'addDepartmentBtn'"><i nz-icon
                        nzType="plus"></i>创建部门</button>
            </div>
            <div class="mt-10">
                <nz-table #dataTable nzSize="middle" [nzData]="data" nzShowPagination="false" nzFrontPagination="false"
                    nzBordered="true">
                    <thead>
                        <tr>
                            <th nzAlign="center" nzWidth="60px">#</th>
                            <th nzAlign="center" nzWidth="120px">名称</th>
                            <th nzAlign="center" nzWidth="120px">上级组织</th>
                            <th nzAlign="center" nzWidth="200px">联系邮箱</th>
                            <th nzAlign="center" nzWidth="200px">联系电话</th>
                            <th nzAlign="center">负责人</th>
                            <th nzAlign="center" nzWidth="60px">排序</th>
                            <th nzAlign="center" nzWidth="120px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of dataTable.data;let i = index">
                            <td nzAlign="center">{{ i + 1}}</td>
                            <td nzAlign="center">{{ data.name }}</td>
                            <td nzAlign="center">{{ getUpperDepartment(data.upId) }}</td>
                            <td nzAlign="center">{{ data.email }}</td>
                            <td nzAlign="center">{{ data.telephone }}</td>
                            <td nzAlign="center">{{ data.leaderName }}</td>
                            <td nzAlign="center">{{ data.sort }}</td>
                            <td nzAlign="center">
                                <button nz-button nzType="default" nzShape="circle" *canOperate="'updateDepartmentBtn'"
                                    (click)="edit(data.id)" class="mr-10"><i nz-icon nzType="edit"></i></button>
                                <button nz-button nzType="default" nzShape="circle" *canOperate="'deleteDepartmentBtn'"
                                    (click)="remove(data.id)" class="mr-10"><i nz-icon nzType="delete"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </nz-card>
    </div>
</div>

<ng-template #addTitleTpl>
    <span>添加部门</span>
</ng-template>
<ng-template #editTitleTpl>
    <span>编辑部门</span>
</ng-template>
<ng-template #contentTpl>
    <form nz-form [formGroup]="editForm" (ngSubmit)="submitEdit()">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24">上级部门</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="upDepartment" /></nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_departmentName'">部门名称</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="departmentNameErrorTpl">
                <input [attr.id]="'edit_departmentName'" formControlName="name" nz-input placeholder="部门名称"
                    autocomplete="off" />
            </nz-form-control>
            <ng-template #departmentNameErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请输入部门名称！
                </ng-container>
                <ng-container *ngIf="control.hasError('maxlength')">
                    角色名长度不能超过15！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_email'">联系邮箱</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="emailNameErrorTpl">
                <input [attr.id]="'edit_email'" formControlName="email" nz-input placeholder="联系邮箱"
                    autocomplete="off" />
            </nz-form-control>
            <ng-template #emailNameErrorTpl let-control>
                <ng-container *ngIf="control.hasError('email')">
                    请输入正确的邮箱格式！
                </ng-container>
                <ng-container *ngIf="control.hasError('maxlength')">
                    邮箱长度不能超过50！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_telephone'">联系电话</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="联系电话长度不能超过20！">
                <input [attr.id]="'edit_telephone'" formControlName="telephone" nz-input placeholder="联系电话"
                    autocomplete="off" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_leaderid'">部门负责人</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-select [attr.id]="'edit_leaderid'" nzPlaceHolder="请选择负责人" nzAllowClear nzShowSearch nzServerSearch
                    formControlName="leaderid" (nzOnSearch)="onSearch($event)">
                    <ng-container *ngFor="let u of userDicList">
                        <nz-option *ngIf="!isLoading" [nzValue]="u.key" [nzLabel]="u.value"></nz-option>
                    </ng-container>
                    <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 加载中...
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_sort'">排序</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入排序！">
                <input type="number" [attr.id]="'edit_sort'" formControlName="sort" nz-input placeholder="排序"
                    autocomplete="off" />
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary" class="mr-10">提交</button>
                <button nz-button type="reset" (click)="cancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>